<template>
    <div>
        <div style="display: flex;justify-content: space-between;margin-top: 10px;margin-bottom: 10px">
            <div>
                <el-input size="small" prefix-icon="el-icon-search" placeholder="输入员工名查找员工.."
                          style="margin-right: 10px;width: 300px" v-model="keyword"
                          :disabled="showAdvanceSearchView"
                          @keydown.enter.native="initEmps" clearable @clear="initEmps"
                />
                <el-button size="small" type="primary" icon="el-icon-search" round :disabled="showAdvanceSearchView"
                           @click="initEmps">
                    搜索
                </el-button>
                <el-button size="small" type="primary" round @click="()=>{
                    showAdvanceSearchView = !showAdvanceSearchView;
                    if (showAdvanceSearchView){
                        // this.initStableData();
                        advanceSearchIcon='fa fa-angle-double-up';
                    }
                    else{
                        this.emptySearchEmp();
                        advanceSearchIcon='fa fa-angle-double-down';
                        this.initEmps();
                    }
                }">
                    <i :class="advanceSearchIcon" aria-hidden="true" style="margin-right: 5px"/>高级搜索
                </el-button>
            </div>
            <div>
                <el-button size="small" round icon="el-icon-refresh" type="primary" @click="clearSessionStorage"
                           style="margin-right: 8px;"></el-button>
                <el-upload
                        disabled
                        style="display: inline-flex;margin-right: 8px"
                        action="/employee/basic/import"
                        :show-file-list="false"
                        :before-upload="()=>{isUpload=true}"
                        :on-success="onSuccess"
                        :on-error="onError"
                >
                    <el-button round type="success" size="small" v-if="isUpload===false" disabled>
                        <i class="fa fa-level-up"/>
                        导入数据
                    </el-button>
                    <el-button round type="success" size="small" icon="el-icon-loading" :disabled="isUpload" v-else disabled>
                        正在上传
                    </el-button>
                </el-upload>
                <el-button round type="success" size="small" @click="exportData" disabled>
                    <i class="fa fa-level-down"/>
                    导出数据
                </el-button>
                <el-button round type="primary" size="small" icon="el-icon-plus" @click="showAddEmp" disabled>
                    添加员工
                </el-button>
            </div>
        </div>
        <transition name="slide-fade">
            <div v-show="showAdvanceSearchView"
                 style="border: 1px solid skyblue;box-sizing: border-box;border-radius: 5px;margin-bottom: 8px;padding-left: 5px">
                <el-row style="padding-top: 3px;padding-bottom: 3px;width: 100%">
                    <el-col :span="5">
                        学院：
                        <el-input v-model="searchEmp.dept" class="width150" size="small"></el-input>
                    </el-col>
                    <el-col :span="5">
                        专业班级：
                        <el-input v-model="searchEmp.major" class="width150" size="small"></el-input>
                    </el-col>
                    <el-col :span="10" style="margin-top: 5px">
                        在校时间：
                        <el-date-picker
                                v-model="searchEmp.beginAndEnddate"
                                type="daterange"
                                size="mini"
                                :unlink-panels="false"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="4" style="display: flex;justify-content: flex-end;">
                        <div style="margin-right: 10px">
                            <el-button size="small" round @click="()=>{
                                showAdvanceSearchView=false;
                                this.emptySearchEmp();
                                this.initEmps();
                            }">取消
                            </el-button>
                            <el-button size="small" type="primary" round icon="el-icon-search" @click="advanceSearch">
                                搜索
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </transition>
        <div>
            <el-table
                    :ref="multipleSelection"
                    :data="Emps"
                    @selection-change="handleSelectionChange"
                    v-loading="loading"
                    style="width: 100%;">
                <el-table-column
                        type="selection"
                        align="left"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="left"
                        prop="name"
                        label="姓名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="sno"
                        label="学号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="dept"
                        label="学院"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="major"
                        label="专业班级"
                        width="150">
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="age"-->
<!--                        label="年龄"-->
<!--                        width="100">-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="email"
                        label="电子邮件"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号码"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="begintime"
                        label="入学时间"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="endtime"
                        label="毕业时间"
                        width="100">
                </el-table-column>
                <el-table-column

                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="info" icon="el-icon-edit" size="mini" style="padding: 2px" circle
                                   @click="showEditEmp(scope.row)" disabled></el-button>

                        <el-button style="padding: 2px" size="mini" type="danger" round
                                   @click="deleteEmpByid(scope.row)" disabled>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content:space-between;  margin-top: 10px">
                <div>
                    <el-button size="small" round type="danger" icon="el-icon-delete"
                               :disabled="multipleSelection.length==0"
                               @click="deleteMany" disabled>删除全部
                    </el-button>
                </div>
                <div>
                    <el-pagination
                            background
                            layout="sizes, prev, pager, next, jumper, ->, total, slot"
                            :total="total"
                            :page-size="size"
                            :page-count="total/size"
                            :current-page="page"
                            @size-change="sizeChange"
                            @current-change="currentPage"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <el-form ref="emp" :model="emp" :rules="rules" label-position="right" label-width="110px">
                <el-row>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item prop="name" label="姓名:">
                                <el-input size="small" class="width150" clearable prefix-icon="el-icon-edit"
                                          v-model="emp.name"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="学院:" prop="dept">
                                <el-input size="small" class="width150" clearable prefix-icon="el-icon-edit"
                                          v-model="emp.dept"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="专业班级:" prop="major">
                                <el-input size="small" class="width150" clearable prefix-icon="el-icon-edit"
                                          v-model="emp.major"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="学历:">
                                <el-select size="small"  placeholder="最高学历" class="width150" value="本科">
                                    <el-option
                                            value="本科"
                                            label="本科">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="民族:" prop="nationid">
                                <el-select size="small" placeholder="民族" class="width150" value="汉族">
                                    <el-option
                                            value="汉族"
                                            label="汉族">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="学号:" prop="sno">
                                <el-input size="small" clearable class="width150" v-model="emp.sno"
                                          :disabled="true"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="电子邮箱:" prop="email">
                                <el-input size="small" prefix-icon="el-icon-message" clearable class="width150"
                                          v-model="emp.email" placeholder="Email电子邮箱"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="电话号码:" prop="phone">
                                <el-input size="small" clearable class="width150" prefix-icon="el-icon-phone"
                                          v-model="emp.phone" placeholder="电话号码"/>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="毕业学校:">
                                <el-input size="small" clearable prefix-icon="el-icon-edit" class="width150"
                                          placeholder="毕业学校" value="韶关学院"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="入学日期:" prop="begintime">
                                <el-date-picker
                                        style="width: 150px"
                                        v-model="emp.begintime"
                                        type="date"
                                        size="small"
                                        placeholder="入学日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="毕业日期:" prop="endtime">
                                <el-date-picker
                                        style="width: 150px"
                                        v-model="emp.endtime"
                                        type="date"
                                        size="small"
                                        placeholder="毕业日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="cancleAddEmp">取 消</el-button>
    <el-button size="small" type="primary" @click="addEmp" disabled>确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
const url = '/members/basic/'
export default {
    name: "MemBasic",
    data() {
        return {
            fileList: [],
            roomFaces: [],
            registerFace: {
                file: '',
                name: '',
                groupId: '',
                faceId: '',
            },
            faceTitle: "上传图片",
            searchEmp: {
                dept: '',
                major: '',
                posid: '',
                engageform: '',
                beginAndEnddate: '',
            },
            isUpload: false,
            advanceSearchIcon: 'fa fa-angle-double-down',
            showAdvanceSearchView: false,
            roomFaceDialogVisible: false,
            Emps: [],
            popoverVisible: false,
            loading: false,
            total: 0,
            page: 1,
            size: 10,
            keyword: '',
            dialogVisible: false,
            faceDialogVisible: false,
            multipleSelection: [],
            emp: {
                name: "",
                sex: '',
                birthday: "",
                idcard: "",
                wedlock: "",
                nationid: '',
                nativeplace: "",
                dept: '',
                email: "",
                phone: "",
                address: "",
                sno: "",
                major: '',
                engageform: "",
                tiptopdegree: "",
                specialty: "",
                school: "",
                begintime: "",
                workstate: "在职",
                contractterm: 0,
                endtime: "",
                notworkdate: null,
                begincontract: "",
                endcontract: "",
                workage: null,
                faceId: '',
            },
            rules: {
                name: [
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                    {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                ],
                sex: [
                    {required: true, message: '请选择性别', trigger: 'change'}
                ],
                idcard: [
                    {required: true, message: '请输入身份证号码', trigger: 'blur'},
                    {min:18,max:18,message: '长度必须为18位',trigger: 'blur'}
                ],
                email: [{required: true, message: '请输入电子邮箱', trigger: 'blur'}],
                phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
                address: [{required: true, message: '请输入家庭住址', trigger: 'blur'}],
                begintime: [{required: true, message: '请选择入学日期', trigger: 'change'}],
                endtime: [{required: true, message: '请选择毕业日期', trigger: 'change'}],
                dept: [{required: true, message: '请输入学院名称', trigger: 'change'}],
                major: [{required: true, message: '请输入专业班级', trigger: 'change'}],
            },
            politicsstatus: [],
            nations: [],
            positions: [],
            degree: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            tempDepName: '',
            title: '',
            empFace: {
                empId: '',
                faceId: '',
            },
            roomFace: {
                roomId: '',
                faceId: ''
            },
            rfmultipleSelection: [],
        }
    },
    mounted() {
        this.initEmps();
    },
    methods: {
        handleChange(file, fileList) {
            this.fileList = fileList
        },
        advanceSearch() {
            // console.log(this.searchEmp);
            this.page = 1;
            this.size = 10;
            this.initEmps();
            // this.emptySearchEmp();
        },
        emptySearchEmp() {
            this.searchEmp = {
                dept: '',
                major: '',
                posid: '',
                engageform: '',
                beginAndEnddate: '',
            };
            this.page = 1;
            this.size = 10;
        },
        onSuccess(response, file, fileList) {
            this.isUpload = false;
            this.initEmps();
            this.$notify({
                title: '添加成功',
                type: "success",
            });
        },
        onError(response, file, fileList) {
            this.isUpload = false;
            this.$notify({
                title: '添加失败',
                type: "error",
            });
        },
        exportData() {
            this.$confirm('此操作将导出数据库中所有员工的资料, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                window.open('/employee/basic/export', '_parent');
                this.$notify({
                    title: '导出成功',
                    type: "success",
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        clearSessionStorage() {
            this.initEmps()
        },
        emptyEmp() {
            this.emp = {
                name: "",
                sex: "",
                birthday: "",
                idcard: "",
                dept: "",
                major: '',
                nativeplace: "",
                politicid: '',
                email: "",
                phone: "",
                address: "",
                workid: "",
                posid: '',
                engageform: "",
                tiptopdegree: "",
                specialty: "",
                school: "",
                begintime: "",
                workstate: "在职",
                endtime: "",
                notworkdate: null,
                begincontract: "",
                endcontract: "",
                workage: null,
                faceId: '',
            };
            this.tempDepName = '';
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        deleteMany() {
            this.$confirm('此操作将永久删除【' + this.multipleSelection.length + '】条记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = '?';
                this.multipleSelection.forEach(emp => {
                    ids += 'ids=' + emp.id + '&';
                });
                console.log(ids)
                this.deleteRequest(url + ids).then(resp => {
                    if (resp) {
                        this.multipleSelection = [];
                        this.initEmps();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        deleteEmpByid(emp) {
            this.$confirm('此操作将永久删除【' + emp.name + '】该名员工, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest(url + emp.id).then(resp => {
                    if (resp) {
                        this.initEmps();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        cancleAddEmp() {
            this.dialogVisible = false;
            this.tempDepName = '';
            this.$refs.emp.resetFields()
        },
        handleUpdateEmp(emp) {
            this.putRequest(url, emp).then(resp => {
                if (resp) {
                    this.tempDepName = '';
                    this.emptyEmp();
                    this.dialogVisible = false;
                    this.initEmps();
                }
            })
        },
        emptyRegister() {
            this.registerFace = {
                file: '',
                name: '',
                groupId: '',
                faceId: '',
            }
        },
        addEmp() {
            this.$refs['emp'].validate(valid => {
                if (valid) {
                    this.handleUpdateEmp(this.emp)
                } else {
                    return false;
                }
            })
        },
        handleAddEmp(emp) {
            this.postRequest("/employee/basic/", emp).then(resp => {
                if (resp) {
                    this.tempDepName = '';
                    this.emptyEmp();
                    this.dialogVisible = false;
                    this.initEmps();
                }
            })
        },
        showAddEmp() {
            this.emptyEmp();
            this.title = '添加员工';
            this.dialogVisible = true;
        },
        showEditEmp(data) {
            Object.assign(this.emp, data);
            this.title = '编辑员工资料';
            this.dialogVisible = true;
            // console.log(this.emp)
        },
        currentPage(val) {
            this.page = val;
            this.initEmps();
        },
        sizeChange(val) {
            this.size = val;
            this.page = 1;
            this.initEmps();
        },
        initEmps() {
            this.loading = true;
            let advanceSearch = '&dept=' + this.searchEmp.dept + '&major=' + this.searchEmp.major ;
            if (this.searchEmp.beginAndEnddate) {
                advanceSearch +=  '&beginTime=' + this.searchEmp.beginAndEnddate[0] + '&endTime=' + this.searchEmp.beginAndEnddate[1];
            }
            let n_url = url+"?page=" + this.page + '&size=' + this.size + '&name=' + this.keyword + advanceSearch
            console.log(n_url)
            this.getRequest(n_url).then(resp => {
                this.loading = false;
                if (resp) {
                    this.Emps = resp.data;
                    // console.log(this.Emps)
                    this.total = resp.total;
                }
            })
        }
    }
}
</script>

<style>
    .width150 {
        width: 150px;
    }

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }

</style>
<style scoped>
    /* 用来设置当前页面element全局table 选中某行时的背景色*/
    /deep/ .el-table__body tr.current-row>td{
        background-color: rgba(35,29,37,.9) !important;
        /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
    }
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td{
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table--enable-row-transition, /deep/ .el-table__body td, /deep/ .el-table .cell{
        background-color: rgba(35,29,37,.1);;
    }
    /deep/ .el-table .cell{
        color: rgba(256, 256, 256, 0.78);
    }
</style>

